<template>
	<view class="edit">
		<uni-list v-if="userInfo.data.length > 0">
			<uni-list-item>
				<template #header>
					<view class="name_label">昵称</view>
				</template>
				<template #body>
					<view class="value_label"><input v-model="userInfo.data[0].nickName" /></view>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template #header>
					<view class="name_label">简介</view>
				</template>
				<template #body>
					<view class="value_label"><textarea v-model="userInfo.data[0].desc"></textarea></view>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template #header>
					<view class="name_label">性别</view>
				</template>
				<template #body>
					<view class="value_label">
						<picker mode="selector" :range="sexArray" :value="sexIndex" @change="sexChangeHandle">
							<view>{{ sexArray[sexIndex] }}</view>
						</picker>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template #header>
					<view class="name_label">生日</view>
				</template>
				<template #body>
					<view class="value_label">
						<uni-datetime-picker type="date" :value="userInfo.data[0].birthday" start="1950-1-1" end="2020-1-1" @change="editBirthdayHandle" />
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="button">保存设置</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				data: []
			},
			sexIndex: 0,
			sexArray: ['男', '女'],
			userId:''
		};
	},
	onLoad() {
		this.userId = getApp().globalData.userInfo.userId;
		this.getUserInfoData();
	},
	watch: {
		'userInfo.data'(v) {
			this.sexIndex = this.parsePickerValue();
		}
	},
	methods: {
		sexChangeHandle(e) {
			this.sexIndex = e.target.value;
		},
		parsePickerValue() {
			let v = this.userInfo.data[0].sex,
				a = ['男', '女'];
			return a.indexOf(v) > -1 ? a.indexOf(v) : 0;
		},
		editBirthdayHandle(v) {
			this.userInfo.data[0].birthday = v;
		},
		getUserInfoData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getUserInfoData', {
						userId: that.userId
					})
					.then(res => {
						that.userInfo.data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		}
	}
};
</script>

<style lang="less">
.edit {
	font-size: 28rpx;
	display: flex;
	color:#333333;
	flex-direction: column;
	justify-content: center;
	.button{
		border:2rpx #CCCCCC solid;
		border-radius: 10rpx;
		text-align: center;
		margin:60rpx;
		padding:12rpx 20rpx;
		font-size: 28rpx;
	}
	.name_label {
		width: 120rpx;
		font-size: 28rpx;
	}
	.value_label {
		font-size: 28rpx;
		.uni-datetime-picker-timebox {
			border: 0;
			padding: 0;
			.uni-datetime-picker-down-arrow {
				display: none;
			}
		}
	}
}
</style>
